/*
 * @Title: 电商搜索
 * @Created by: ycq
 */
<template>
	<view class="search-body">
		<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
		<view class="search-head">
			<view class="back" @click="back()">
				<uni-icon type="arrowleft" size="30" color="#999999"></uni-icon>
			</view>
			<view class="search-bar">
				<view>
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<uni-icon type="search" color="#DBDBDB" size='20' style='margin: 10upx 30upx;'></uni-icon>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<uni-icon type="search" color="#DBDBDB" size='20' style='margin: 0 30upx;'></uni-icon>
					<!-- #endif -->
					<input 
					placeholder="游乐园头饰" 
					@input="keyInput"
					type="text" 
					placeholder-style="color:#999999"
					>
				</view>
				 <view class="scan" @tap="goScan"><uni-icon type="scan" size="20" color="#333333"></uni-icon></view>
			</view>
			<view class='search-btn'>搜索</view>
		</view>
		<!-- 搜索商品前 -->
		<view 
		class="search-list" 
		v-for="(item,index) in searchData" 
		:key='index'
		v-if="!searchShop">
			<view class="list-title">
				<image class="list-icom" :src="item.img" mode=""></image>
				<text class="title-text">{{item.title}}</text>
				<text v-if="index==0" class="operation">清空</text>
				<uni-icon v-if="index==0" class="operation-icon" type="delete" size="20" color="#999999"></uni-icon>
				
				<image v-if="index==0" class="operation-img" src="/static/ssDel.png" mode=""></image>
				<!-- <uni-icon v-if="index>0" :class="item.isOpen?'operation-icon-ac':'operation-icon'"  @click="item.isOpen=!item.isOpen" type="arrowleft" size="20" color="#999999"></uni-icon> -->
				
				<!-- <text v-if="index>0&&!item.isOpen" class="operation" @click="item.isOpen=!item.isOpen">展开</text>
				<text v-if="index>0&&item.isOpen" class="operation" @click="item.isOpen=!item.isOpen">收起</text> -->
			</view>
			<view class="list-area-ac" >
				<view :class="index<2?'search-item':'search-item-2'"  v-for="(searchItem,innerIndex) in item.data" :key='innerIndex' @click="chooseSearch(searchItem)">
				{{index>1?(innerIndex+1):''}}  {{searchItem}}
				<image v-if="index>1" src="/static/hot.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 搜索商品后 -->
		<view v-if="searchShop" class="searchShop">
			<view 
			v-for="(shopIns,index) in handleShop" 
			:key="index" 
			class="seatch-item"
			@tap="goShopColl(index)"> 
				<text>{{shopIns.name}}</text>
				<image src="/static/shop/ssJiantou.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				searchShop:'',//搜索的商品
				handleShop:[
					{
						name:'头饰 游乐园发箍'
					},
					{
						name:'游乐园头饰网红'
					},
					{
						name:'头饰游乐园韩国ins'
					},
					{
						name:'头饰儿童游乐园'
					}
				],//处理后的商品数据
				searchData:[
					{   
						img:'/static/hotel/history-s.png',
						title:'历史搜索',
						data:[
							'MAC口红'
						],
						isOpen:true
					},
					{   
						img:'/static/hotel/djdzs.png',
						title:'大家都在搜',
						data:[
							'游乐园','网红裙子','马丁靴女','胖妹妹套装女'
						],
						isOpen:false
					},
					{   
						img:'/static/hotel/rmpp.png',
						title:'热门品牌',
						data:[
							'双十一必买高颜值保暖装备',
							'冬日必备瘦腿靴',
							'爆火小香风的衣服',
							'打底衫新穿法',
							'学院风毛衣'
						],
						isOpen:false
					},
					
					
				]
			}
		},
		methods: {
			// 监听输入框的值
			keyInput(event){
				this.searchShop = event.detail.value;
				console.log(event.detail.value);
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			goScan(){
				uni.navigateTo({
					url:'/pages/common/scan?from=1'
				})
			},
			goShopColl(index){
				uni.navigateTo({
					url:'shopColl'
				})
			}
		},
		created(){
			
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.search-body{
		width: 100%;
		height: 100vh;
	}
	.search-head{
		width: 750upx;
		height: 60upx;
		display: flex;
		margin-top: 20upx;
		flex-direction: row;
		
	}
	.back{
		width: 60upx;
		height: 60upx;
		margin-left: 20upx;
		
	}
	.back uni-icon{
		width: 30upx;
		height: 30upx;
	}
	.search-bar{
		width: 500upx;
		border-radius: 30upx;
		height: 60upx;
		border: #BBBBBB solid 1upx;
		margin-left: 20upx;
		margin-right: 20upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.search-bar > view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.search-bar input{
		width: 380upx;
		height: 60upx;
		display: block;
		font-size: 28upx;
		line-height: 60upx;
		border-right: 1px solid #dbdbdb;
	}
	.scan{
		padding:10upx;
	}
	.search-btn{
		width: 130upx;
		height: 60upx;
		border-radius: 28upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		font-size: 28upx;
		
		margin-right: 20upx;
	}
	.search-list{
		width: 750upx;
		margin-top: 30upx;
		height: auto;
	}
	.list-title{
		width: 700upx;
		margin-left: 25upx;
		height: 40upx;
		
	}
	.list-icom{
		width: 40upx;
		height: 40upx;
		float: left;
	}
	.title-text{
		height: 40upx;
		font-size: 26upx;
		margin-left: 20upx;
		line-height: 40upx;
		float: left;
	}
	.operation{
		font-size: 24upx;
		line-height: 40upx;
		float: right;
		color: #999999;
	}
	.operation-icon{
		transform: rotate(270deg);
		float: right;
	}
	.operation-icon-ac{
		transform: rotate(90deg);
		float: right;
	}
	.operation-img{
		width:28upx;
		height: 27upx;
		margin-right:10upx;
		float: right;
		margin-top: 10upx;
	}
	.list-area{
		width: 650upx;
		margin-top: 20upx;
		margin-left: 50upx;
		height: 120upx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.list-area-ac{
		width: 650upx;
		margin-top: 20upx;
		margin-left: 50upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.search-item{
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		background: rgba(248,246,247,1.00);
		border-radius: 20upx;
		font-size: 24upx;
		color: rgba(51,51,51,1.00);
	}
	.search-item-2{
		width: 100%;
		/* background: #007AFF; */
		padding: 4upx 24upx;
		margin: 10upx 20upx;
		border-radius: 20upx;
		color: rgba(51,51,51,1.00);
		font-size: 24upx;
		position: relative;
	}
	.search-item-2 image{
		width: 22upx;
		height: 27upx;
		position: absolute;
		right: -20upx;
	}
	
	/* 搜索后 */
	.searchShop{
		margin:30upx
	}
	.seatch-item{
		line-height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.seatch-item text{
		color: #333333;
		font-size: 28upx;
	}
	.seatch-item image{
		width:24upx;
		height: 24upx;
	}
</style>
